<!--
    group: 信息管理
    name: 信息管理
    item: 我的合同
-->
<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="margin-top: 10px;">
      <a-form layout="inline">
        <a-row :gutter="24" style="margin-top: 10px">
          <a-col :md="6" :lg="6" :xl="7" :xxl="4">
            <a-form-item label="合同编号">
              <a-input placeholder="请输入" v-model="filterList.agreeNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :lg="6" :xl="7" :xxl="4">
            <a-form-item label="渠道名称">
              <a-input placeholder="请输入" v-model="filterList.channelName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="10">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 10px" icon="reload" @click="handleReset">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a>
              </span>
          </a-col>
        </a-row>
        <div class="table-page-search-wrapper" v-show="toggleSearchStatus">
          <a-row :gutter="24">
            <a-col :md="6" :lg="6" :xl="7" :xxl="4">
              <a-form-item label="合同类型">
                <a-select placeholder="请选择" v-model="filterList.agreeType">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">电子合同</a-select-option>
                  <a-select-option value="2">纸质合同</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :lg="6" :xl="7" :xxl="4">
              <a-form-item label="签约状态">
                <a-select placeholder="请选择签约状态" v-model="filterList.status">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">待签约</a-select-option>
                  <a-select-option value="2">已邮寄</a-select-option>
                  <a-select-option value="3">已签约</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="12" :lg="10">
              <a-form-item label="合同到期时间">
                <a-range-picker v-model="filterList.time" @change="onChange" format="YYYY-MM-DD HH:mm:ss"
                                :showTime="{ defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')] }" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <!--表格-->
    <a-table bordered
             :scroll="{x:800}"
             :columns="columns"
             :data-source="tableData"
             :loading="loading"
             :pagination="false"
    >
      <!-- 字符串超长截取省略号显示-->
      <span slot="esContent" slot-scope="text">
        <j-ellipsis :value="text" :length="15" />
      </span>

      <!-- 客户类型 1.企业;2.个人;3.直客 -->
      <span slot="channelType" slot-scope="text">
        {{{1:'企业',2:'个人',3:'直客'}[text] || ''}}
      </span>

      <!-- 是否标准合同 -->
      <span slot="agreeProcess" slot-scope="text">
        {{{1:'是',2:'否'}[text] || ''}}
      </span>

      <!--合同类型-->
      <span slot="agreeType" slot-scope="text, record">
        {{{1:'电子合同',2:'纸质合同'}[text] || ''}}
      </span>

      <!--签约状态-->
      <span slot="status" slot-scope="text, record">
        <!--状态 1待签约、2已邮寄（纸质版）、3已签约、4已失效、5已中止，6已终止，7已过期，8待生效-->
        <a-tag :color="statusInfo.contractColor[text]">
          {{statusInfo.contractLabel[text]}}
        </a-tag>
      </span>

      <!--操作-->
      <span slot="action" slot-scope="text,record">
        <a @click="showDetail(record)">详情</a>
        <a-divider type="vertical" />
        <!--checkStatus   状态 1未审核 2审核通过 3审核拒绝-->
        <span v-if="record.status==1 && record.checkStatus==2">
          <a @click="showSign(record)">签约</a>
          <a-divider type="vertical" />
        </span>
        <a-dropdown>
          <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="downLoad(record.id,record.agreeName)">下载合同</a>
            </a-menu-item>
            <!-- 续签合同 -->
            <a-menu-item v-if="record.status == 3">
              <a @click="renewContract(record)">续签合同</a>
            </a-menu-item>
            <a-menu-item v-if="record.status == 5">
              <a @click="showDetail(record)">解除中止</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>


    <!-- 续签合同  -->
    <RenewContractModal
      v-show="renewShow"
      :renewShow="renewShow"
      :renewDeatil="renewDeatil"
    />

  </div>
</template>

<script>
import { getContractList,getContractDownload } from '@/api/setting'
import RenewContractModal from '@/views/infoManagement/modules/renewContractModal'
const contractStatusListNew = {
  contractColor: {1:'#d9d9d9',2:'#ffd591',3:'#5ebee9',4:'#d9d9d9',5:'#32BC51',6:'#FF797F',7:'#FF797F',8:'#ffd591'},
  contractLabel: {1:'待签约',2:'已邮寄',3:'已签约',4:'已失效',5:'已中止',6:'已终止',7:'已过期',8:'待生效'}
}
export default {
  name: 'channelContractList',
  components:{
    RenewContractModal
  },
  data() {
    return {
      statusInfo: contractStatusListNew,
      toggleSearchStatus:false,
      filterList: {
        time: [],
      },

      loading: false,  //表格加载
      tableData: [],
      columns: [
        {
          title: '合同编号',
          align: 'center',
          width: 230,
          dataIndex: 'agreeNo',
        },
        {
          title: '合同名称',
          dataIndex: 'agreeName',
          scopedSlots: { customRender: 'esContent' },
          ellipsis: true,
          align: 'center',
          width: 180
        },
        {
          title: '生效状态',
          dataIndex: 'effectiveStatus',
          align: 'center',
          width: 110,
        },
        {
          title: '渠道名称',
          align: 'center',
          dataIndex: 'channelName',
          scopedSlots: { customRender: 'esContent' },
          ellipsis: true,
          width: 160,
        },
        {
          title: '客户类型',
          align: 'center',
          width: 100,
          dataIndex: 'channelType',
          scopedSlots: { customRender: 'channelType' },
        },
        {
          title: '到期时间',
          dataIndex: 'agreeExpireTime',
          align: 'center',
          width: 150
        },
        {
          title: '是否标准合同',
          dataIndex: 'agreeProcess',
          key: 'agreeProcess',
          align: 'center',
          scopedSlots: {customRender: 'agreeProcess'},
          width: 120
        },
        {
          title: '合同类型',
          align: 'center',
          width: 100,
          dataIndex: 'agreeType',
          scopedSlots: { customRender: 'agreeType' },
        },
        {
          title: '签约状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
          width: 100
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 180,
          fixed: 'right'
        }
      ],

      //续签合同
      renewShow: false,
      renewDeatil:{},
    }
  },
  mounted() {
    this.getTableData();
  },
  methods:{
    //展开收起
    handleToggleSearch(){
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    //时间选择
    onChange(date, dateString) {
      this.filterList.signStartTime =dateString[0];
      this.filterList.signEndTime =dateString[1];
    },
    //查询
    handleSearch(){
      // this.page.currentPage = 1;
      this.getTableData();
    },
    //重置
    handleReset(){
      // this.page.currentPage = 1;
      this.filterList = {};//清空查询条件
      this.getTableData();//重置列表
    },
    // 合同详情
    showDetail(record){
      this.$router.push({
        path: '/infoManagement/contractChannelDetails',
        query: {
          agreeId:record.id
        }
      })
    },
    //签约
    showSign(record) {
      this.$router.push({
        path: '/registerProcess/confirmContract',
        query: {
          agreeId: record.id,
          protocolType: record.protocolType,  //总分包类型
          agreeSceneCode: record.agreeSceneCode,   //合同模板code码
          sign: 1
        }
      })
    },
    //续签合同
    renewContract(record){
      this.renewDeatil = record;
      this.renewShow = true;
    },
    //关闭续签合同
    hideCancel(){
      this.$nextTick(()=>{
        this.renewShow = false;
      })
      this.getTableData();
    },
    //下载
    downLoad(id,name){
      getContractDownload(id).then(res => {
        if(res.success){
          let data = res.result;
          if(data.includes('jpeg') || data.includes('png') || data.includes('jpg') || data.includes('pdf')){
            this.AddWatermark.addWatermark(data).then(res => {
              const a = document.createElement('a')
              a.href = res.url
              a.download = name + '.' + res.suffix;
              a.click()
              window.URL.revokeObjectURL(res.url);
            })
          }else{
            this.$message.warning('格式不对，无法下载')
          }
        }else{
          this.$message.warning(res.message)
        }
      })

    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {};
      params = this.filterList;

      getContractList(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.tableData = res.result || [];
          this.loading = false;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //百分比转换0.6 => 60%
    conversion(value){
      return percentConversion(value)
    }
  }
}
</script>

<style scoped lang="less">

</style>
